<template>
  <view class="handle-container">
    <!-- 基础信息 -->
    <view class="section">
      <text class="section-title">基础信息</text>
      <view class="info-list">
        <view class="info-item">
          <text class="info-label">姓名：</text>
          <text class="info-value">{{ memberInfo.userInfo?.real_name }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">身份证号：</text>
          <text class="info-value">{{ memberInfo.userInfo?.idnum }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">手机号：</text>
          <text class="info-value">{{ memberInfo.userInfo?.phone }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">性别：</text>
          <text class="info-value">{{ MEMBER_GENDER_NAMES[memberInfo.userInfo?.gender] }}</text>
        </view>
        
        <view class="info-item">
         <text class="info-label">所属{{ userInfo?.type === USER_TYPES.GAS ? '加油站' : '公司' }}：</text>
         <text class="info-value">{{ memberInfo.member?.orgName}}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">职位：</text>
		  <text class="required" v-if="selectedRole == '' && isSubmit">*请选择职位</text>
          <view class="role-options">
            <view 
              v-for="role in roles" 
              :key="role.value"
              :class="['role-btn', selectedRole === role.value ? 'role-btn-active' : '']"
			  @click="handleSelectRole(role.value)"
            >
              {{ role.label }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 资质认证 - 只在维修商角色时显示 -->
    <view class="section-zz" v-if="userInfo?.type === USER_TYPES.MAINTENANCE">
      <text class="section-title-zz">资质认证</text>
      <view class="qualification-list">
        <view class="qualification-item" v-for="(item, index) in qualificationList" :key="index">
          <image class="check-icon" src="/static/my/my-zz.png" mode="aspectFit"></image>
          <text class="qualification-text">{{ item }}</text>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <view class="reject-btn" @click="handleReject">
        <text class="btn-text">驳回申请</text>
      </view>
      <view class="approve-btn" @click="handleApprove">
        <text class="btn-text">同意申请</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { memberApi } from '@/service/api.js'
import { USER_TYPES,MEMBER_GENDER_NAMES,MEMBER_ROLES} from '@/service/api.js'
import { QUALIFICATION_MEMBER_MAP,QUALIFICATION_MEMBER_ORDER} from '@/service/api.js'
import { userStore } from '@/utils/userStore.js'

const memberId = ref('')
const userInfo = ref({})
const memberInfo = ref({})
const selectedRole = ref('')
const isSubmit = ref(false)

// 根据用户类型动态设置角色选项
const roles = computed(() => {
  if (userInfo.value?.type === USER_TYPES.GAS) {
    return [
      { label: '主管', value:  MEMBER_ROLES.MANAGER},
      { label: '员工', value: MEMBER_ROLES.STAFF }
    ]
  } else {
    return [
      { label: '维修主管', value: MEMBER_ROLES.MANAGER },
      { label: '维修员', value: MEMBER_ROLES.STAFF }
    ]
  }
})
const qualificationList = ref([])


// 选择角色
const handleSelectRole = (role) => {
  selectedRole.value = role
}


// 获取成员详情
const fetchMemberDetail = async () => {
  try {
    userInfo.value = userStore.getUserInfo() // 获取当前用户信息
    const response = await memberApi.getMemberDetail(memberId.value)
    if (response.code === undefined) {
      memberInfo.value = response
	  qualificationList.value = QUALIFICATION_MEMBER_ORDER
	  			  .filter(key => response.userInfo[key] === "1")  // 只保留值为"1"的项
	  			  .map(key => QUALIFICATION_MEMBER_MAP[key])  // 转换为对应的资质名称
    } else {
	  throw new Error(response.msg || '获取成员信息失败')
	}
  } catch (error) {

    uni.showToast({
      title: error.message ||'获取成员信息失败',
      icon: 'none'
    })
  }
}

// 处理驳回
const handleReject = async () => {
  try {
    const response = await memberApi.reviewMember(memberId.value,false,selectedRole.value)
    if (response.code === undefined) {
      uni.showToast({
        title: '已驳回申请',
        icon: 'success'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    } else {
		throw new Error(response.msg || '操作失败')
	}
  } catch (error) {
    uni.showToast({ 
      title: error.message || '操作失败',
      icon: 'none'
    })
  }
}

// 处理同意
const handleApprove = async () => {
  try {
    const response = await memberApi.reviewMember(memberId.value,true,selectedRole.value)
    if (response.code === undefined) {
      uni.showToast({
        title: '已同意申请',
        icon: 'success'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    } else {
		throw new Error(response.msg || '操作失败')
	}
  } catch (error) {
    uni.showToast({
        title: error.message || '操作失败',
      icon: 'none'
    })
  }
}

onMounted(() => {
  // 获取路由参数中的成员ID
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  memberId.value = currentPage.options.id
  
  fetchMemberDetail()
})
</script>

<style>
.handle-container {
  min-height: 100vh;
  padding-bottom: calc(82rpx + env(safe-area-inset-bottom));
}

.section {
  margin-top: 56rpx;
  padding: 0 56rpx;
}

.section-title {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.info-list {
  background: #FFFFFF;
  margin-top: 40rpx;
}

.info-item {
  margin-bottom: 41rpx;
  border-bottom: 2rpx solid rgba(0,30,50,1);
  padding-bottom: 13rpx;
}
.info-item:last-child{
  border-bottom: 0rpx solid rgba(0,30,50,1);
  margin-bottom: 0rpx;
  padding-bottom: 0rpx;
}


.info-label {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

.info-value {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

.required {
  font-family: PingFangSC-Medium;
  font-size: 24rpx;
  color: #BA0C2F;
  letter-spacing: 0;
  line-height: 20px;
  font-weight: 500;
}

/* 角色选择按钮样式 */
.role-options {
  display: flex;
  gap: 20rpx;
  margin-top: 24rpx;
}

.role-btn {
  width: 156rpx;
  height: 64rpx;
  background: #DEDEDE;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

.role-btn-active {
  background: #285789;
  color: #FFFFFF;
}

.section-zz {
  padding-bottom: calc(40rpx + 82rpx + env(safe-area-inset-bottom));
  padding-top: 44rpx;
  padding-left: 58rpx;
  padding-right: 58rpx;
  display: flex;
  flex-direction: column;
  gap: 43rpx;
}

.section-title-zz {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

/* 资质认证部分 */
.qualification-list {
  background: #FFFFFF;
}

.qualification-item {
  display: flex;
  align-items: center;
  margin-bottom: 52rpx;
}

.check-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 18rpx;
}

.qualification-text {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

/* 底部按钮 */
.bottom-buttons {
  position: fixed;
  left: 44rpx;
  right: 44rpx;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  background: #FFFFFF;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}

.reject-btn, .approve-btn {
  width: 320rpx;
  height: 82rpx;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reject-btn {
  background: #FFFFFF;
  border: 2rpx solid rgba(0,0,0,1);
}

.approve-btn {
  background: #F2B642;
 
}

.btn-text {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

.reject-btn .btn-text {
  color: #000000;
}

.approve-btn .btn-text {
  color: #000000;
}
</style>